<template>
    <div style="width:94%;margin:auto">
        <div style="border-bottom: 1px solid;">
            <h3>用户注册</h3>
        </div>
        <div style="margin-top:10px;width:40%;display: flex;justify-content: space-between;">
            <div>
                <el-form ref="user" :model="user" :rules="rules">
                    <el-form-item prop="nickname">
                        <el-input placeholder="请输入内容" v-model="user.nickname">
                            <template slot="prepend">用户名</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="account">
                        <el-input placeholder="请输入内容" v-model="user.account">
                            <template slot="prepend">账号</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入内容" v-model="user.password" type="password">
                            <template slot="prepend">密码</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input placeholder="请输入内容" v-model="user.phone">
                            <template slot="prepend">手机号</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div style="margin:20px 5px">
            <el-button @click="res('user')" type="primary">重置</el-button>
            <el-button @click="add('user')" type="success">添加</el-button>
        </div>
        <!-- <div>
            手机号<input v-model="phone" type="text">
            验证码:<input v-model="yanz" type="text">
            <button @click="getCode()">获取验证码</button>
            <button @click="log()">登录</button>
        </div> -->
    </div>
</template>
<script>
    export default {
        name:'',
        props:[],
        data() {
            return {
                user:{account:'',phone:'',nickname:'',password:''},
                rules:{
                    nickname:[
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    phone:[
                        {required: false ,type: 'number', message: '手机号必须为数字值',
                        transform(value){return Number(value)}}
                    ],
                    account:[
                        {required: true, message: '请输入账号', trigger: 'blur'},
                    ],
                    password:[
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ]
                }
            }
        },
        methods:{
            res(formName){
                this.$refs[formName].resetFields();
            },
            add(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var that =this
                        this.$postX("/api/public/addUser",that.user)
                        .then(function(resp){
                            that.$refs[formName].resetFields();
                            that.$message({
                                message: resp.data.msg,
                                type: 'success'
                            });
                        })
                    } else {
                        this.$message.error('验证未通过');
                        return false;
                    }
                });
            },
        },
        mounted(){
            
        }
    }
</script>
<style scoped="scoped">

</style>
